<template>
  <div class="top">
    <div class="topbar banxin">
      <div class="bar-let">
        <h1 class="logo">
          <a href="javascript:;">网易云音乐</a>
        </h1>
        <ul>
          <li @click="$router.push('/home')" :class="$route.path === '/home' ? 'active' : ''">发现音乐</li>
          <li @click="$router.push('/mymusic')" :class="$route.path === '/mymusic' ? 'active' : ''">我的音乐</li>
          <li @click="$router.push('/focuson')" :class="$route.path === '/focuson' ? 'active' : ''">关注</li>
          <li> <a href="https://music.163.com/store/product">商城</a> </li>
          <li> <a href="https://music.163.com/st/musician">音乐人</a> </li>
          <li @click="$router.push('/download')" :class="$route.path === '/download' ? 'active' : ''">
            <a href="javascript:;">下载客户端</a>
            <i></i>
          </li>
        </ul>
      </div>
      <div class="bar-rgt">
        <div class="search">
          <input type="text" placeholder="音乐/视频/电台/用户" />
        </div>
        <div class="antor">
          <a href="javascrip:;">创作者中心</a>
        </div>
        <div class="login" @click="gologin">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 打开longin页面
    gologin() {
      this.$store.commit("changeLoginShow", true);
    }
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.top {
  height: 74px;
  background-color: #242424;
  border-bottom: 5px solid #c20c0c;
  box-sizing: border-box;
  .topbar {
    display: flex;
    justify-content: space-between;
    height: 69px;
    line-height: 69px;
    /* background-color: pink; */
    .bar-let {
      display: flex;
      .logo {
        float: left;
        width: 176px;
        height: 69px;
        background-position: 0 0;
        background: url("../assets/images/topbar.png") no-repeat;
        a {
          display: block;
          text-indent: -9999px;
        }
      }
      ul {
        display: flex;
        li {
          position: relative;
          display: inline-block;
          color: #ccc;
          font-size: 14px;
          text-decoration: none;
          padding: 0 20px;
          position: relative;
          cursor: pointer;
          &.active {
            color: #fff;
            background-color: #000;
            &::after {
              content: "";
              position: absolute;
              width: 12px;
              height: 7px;
              bottom: -1px;
              left: 0;
              right: 0;
              margin: auto;
              background: url("../assets/images/topbar.png") -226px 0;
            }
          }
          i {
            position: absolute;
            width: 27px;
            height: 18px;
            top: 20px;
            right: -10px;
            background: url("../assets/images/topbar.png") -190px 0;
          }
        }
      }
    }
    .bar-rgt {
      display: flex;
      padding-right: 20px;
      align-items: center;
      .search {
        display: flex;
        align-items: center;
        width: 158px;
        height: 32px;
        overflow: hidden;
        background-color: #fff;
        border: 1px solid #000;
        border-radius: 32px;
        background: #fff url("../assets/images/topbar.png") 0 -99px;
        input {
          border: none;
          outline: none;
          width: 120px;
          height: 28px;
          margin-left: 32px;
          font-size: 12px;
        }
      }
      .antor {
        margin: 0 20px;
        a {
          display: inline-block;
          width: 90px;
          height: 32px;
          color: #ccc;
          border: 1px solid #ccc;
          box-sizing: border-box;
          border-radius: 20px;
          line-height: 32px;
          text-align: center;
          &:hover {
            color: #fff;
            border: 1px solid #fff;
          }
        }
      }
      .login {
        text-decoration: none;
        color: #787878;
        cursor: pointer;
        user-select: none;
        &:hover {
          color: #ccc;
        }
      }
    }
  }
}
</style>